<template>
	<view class="play">
		<view class="main1" v-for="(item,index) in play" :key="index" @click="toDetail(item.id)">
			<view class="left">
				<view class="title">{{item.title}}</view>
				<view class="time">{{item.time}}</view>
			</view>
			<view class='right'>
				<image :src="item.image" mode="" class="image"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				play: [{
						id: 0,
						image: require('../../../static/images/index5.png'),
						title: "新人帮助（参与必备）",
						time: "2021-06-15 16:00"
					},
					{
						id: 1,
						image: require('../../../static/images/index6.png'),
						title: "新人帮助（参与必备）",
						time: "2021-06-15 16:00"
					},
					{
						id: 2,
						image: require('../../../static/images/index7.png'),
						title: "新人帮助（参与必备）",
						time: "2021-06-15 16:00"
					},
					{
						id: 3,
						image: require('../../../static/images/index8.png'),
						title: "新人帮助（参与必备）",
						time: "2021-06-15 16:00"
					},
				]
			};
		},
		mounted() {

		},
		methods: {
			toDetail(id) {
				this.$Router.push(`/pages/public/new/detail?id=${id}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.play {
		background: white;
		height: 100%;
	}

	.main1 {
		background: white;
		overflow: hidden;
		border-bottom: 1px solid #F3F3F3;
		margin: 18rpx;
		padding: 25rpx 0;

		.left {
			padding-left: 50rpx;
			width: 400rpx;
			float: left;

			.title {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.time {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 75rpx;
			}
		}

		.right {

			float: right;

			.image {
				width: 201rpx;
				height: 129rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>
